<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div style="background: white">

    <div class="cart-time-item">
      <!--<p></p>-->
      <img class="arrow-down" src="./../../images/ic_arrow_down_gray.png">
      <group>
        <picker title="请选择送餐日期:" :value.sync='values' :data="active" v-on:on-hide='change'></picker>
      </group>
    </div>
    <div class="cart-item-box">
      <div class="img-box">
        <img v-bind:src="product.image">
      </div>
      <div class="product-info-box">
        <p>{{product.name}}</p>
        <div class="product-price-box">
          <p class="product-price">{{product.price}}元</p>
          <p>/份</p>
        </div>
        <div class="count-box">
          <div @click="del" class="count-item">
            <img src="./../../images/ic_pop_cart_sub.png" alt="">
          </div>
          <div class="count-item">
            <p>{{product.num}}</p>
          </div>
          <div @click="add" class="count-item">
            <img src="./../../images/ic_pop_cart_add.png" alt="">
          </div>
        </div>
      </div>

    </div>
    <div class="cart-item-box-line"></div>
  </div>
</template>
<script>
  import Picker from './../../components/popup-picker/index.vue'
  import group from './../../components/group/index.vue'
  var CartUtils = require('./../../commons/js/Cart');
  export default{
    data(){
      return {
        dates: [],
        values: ['']
      }
    },
    props: {
      product: {
        type: Object,
        default(){
          return {};
        }
      },
      active: {
        type: Array,
        default(){
          return [];
        }
      }
    },
    components: {
      Picker,
      group
    },
    methods: {
      init(){
        this.values.push(this.product.date + "-" + this.product.week);
      },
      del(){
        var id = this.product.productId;
        var date = this.product.date;
        CartUtils.delCart(id, date);
        this.$emit('refresh', this.productNo);
      },
      add(){
        var id = this.product.productId;
        var date = this.product.date;
        CartUtils.addCart(id, date);
        this.$emit('refresh', this.productNo);
      },
      change(type){
        if (type) {
          var id = this.product.productId;
          var oDate = this.product.date;
          var nDate = this.values[0];
          if (nDate == undefined || nDate == ""){
            nDate = this.active[0][0];
          }
          CartUtils.updateDate(id, oDate, nDate);
          this.$emit('refresh', this.productNo);
        }
      }
    },
    ready: function () {
      this.init();
    }
  }
</script>
<style>
  .picker-box {
    width: 100%;
    height: 15rem;
    background: red;
  }
  .cart-time-item .weui_cell {
    padding: .5rem 1rem;
  }
  .cart-time-item .weui_cell_ft.with_arrow:after {
    border-color: #fff;
  }
  .cart-time-item {
    background: white;
    display: flex;
    position: relative;
    align-items: center;
  }
  .cart-time-item .arrow-down{
    position: absolute;
    right: 1rem;
    top: 50%;
    height: 1.8rem;
    width: 1.8rem;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .cart-time-item .date-info {
    color: orangered;
    padding-left: 1rem;
  }

  .right-arrow {
    position: absolute;
    right: 0px;
    top: 0.7rem;
  }
  .weui_cell_bd{
    font-size: 1rem;
    padding-right: 0.5rem;
  }

  .cart-item-box {
    height: 9rem;
    padding: .5rem 1rem;
    display: flex;
  }

  .cart-item-box .img-box {
    width: 8rem;
    height: 100%;
  }

  .cart-item-box .img-box img {
    width: 100%;
    height: 100%;
  }

  .cart-item-box .product-info-box {
    flex: 1;
    padding-left: 1rem;
    line-height: 3rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.3rem;
  }

  .cart-item-box .product-info-box .product-price-box {
    display: flex;
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    line-height: 2rem;
  }

  .cart-item-box .product-info-box .product-price-box .product-price {
    color: orangered;
  }

  .cart-item-box .product-info-box .count-box {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 7rem;
    height: 2rem;
    display: flex;
  }

  .cart-item-box .product-info-box .count-box .count-item {
    flex: 1;
    text-align: center;
    line-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-item-box .product-info-box .count-box .count-item img{
    width: 2rem;
    height: 2rem;
  }


  .cart-item-box .product-info-box .count-box .count-item:nth-child(2) {
    font-size: 1.6rem;
    padding: 0 1rem;
  }
  .cart-item-box-line{
    width: 100%;
    height: 0.5rem;
    background: #f8f8f8;
  }
  /*.vux-popup-picker-value {*/
  /*color: black;*/
  /*font-size: 1rem;*/
  /*}*/
  /*.weui_cell_bd > p{*/
  /*color: black;*/
  /*font-size: 1rem;*/
  /*}*/

</style>
